<template>
  <button class="lk-button" :class="[`lk-button--${type}`, 
  {'is-plain': plain},
  {'is-round': round},
  {'is-circle': circle},
  {'is-disabled': disabled}]"
  @click="handleClick"
  :disabled="disabled">
    <i v-if="icon" :class="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'LkButton',
  props: {
    type: {
      type: String,
      default: 'default'
    },
    plain: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    circle: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods:{
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>
<style lang="scss">
  .lk-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    // 禁止文字被选中
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    &:hover, &:focus {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
    }
    &:active {
      color: #3a8ee6;
      border-color: #3a8ee6;
      outline: none;
    }
    &.is-plain:hover,
    &.is-plain:focus {
      background: #fff;
      border-color: #409eff;
      color: #409eff;
    }
    &.is-plain:active {
      border-color: #3a8ee6;
      color: #3a8ee6;
    }
    &--primary {
      color: #fff;
      background-color: #409eff;
      border-color: #409eff;
      &:hover,
      &:focus {
        background: #66b1ff;
        border-color: #66b1ff;
        color: #fff;
      }
      &:active {
        background: #3a8ee6;
        border-color: #3a8ee6;
        color: #fff;
      }
      &.is-plain {
        color: #409eff;
        background: #ecf5ff;
        border-color: #b3d8ff;
        &:hover,
        &:focus {
          background: #409eff;
          border-color: #409eff;
          color: #fff;
        }
        &:active {
          background: #3a8ee6;
          border-color: #3a8ee6;
          color: #fff;
          outline: none;
        }
      }
    }
    &--success {
      color: #fff;
      background-color: #67c23a;
      border-color: #67c23a;
      &:hover,
      &:focus {
        background: #85ce61;
        border-color: #85ce61;
        color: #fff;
      }
      &:active {
        background: #5daf34;
        border-color: #5daf34;
        color: #fff;
      }
      &.is-plain {
        color: #67c23a;
        background: #f0f9eb;
        border-color: #c2e7b0;
        &:hover,
        &:focus {
          background: #67c23a;
          border-color: #67c23a;
          color: #fff;
        }
        &:active {
          background: #5daf34;
          border-color: #5daf34;
          color: #fff;
          outline: none;
        }
      }
    }
    &--info {
      color: #fff;
      background-color: #909399;
      border-color: #909399;
      &:hover,
      &:focus {
        background: #a6a9ad;
        border-color: #a6a9ad;
        color: #fff;
      }
      &:active {
        background: #82848a;
        border-color: #82848a;
        color: #fff;
      }
      &.is-plain {
        color: #909399;
        background: #f4f4f5;
        border-color: #d3d4d6;
        &:hover,
        &:focus {
          background: #909399;
          border-color: #909399;
          color: #fff;
        }
        &:active {
          background: #82848a;
          border-color: #82848a;
          color: #fff;
          outline: none;
        }
      }
    }
    &--warning {
      color: #fff;
      background-color: #e6a23c;
      border-color: #e6a23c;
      &:hover,
      &:focus {
        background: #ebb563;
        border-color: #ebb563;
        color: #fff;
      }
      &:active {
        color: #fff;
        background-color: #e6a23c;
        border-color: #e6a23c;
      }
      &.is-plain {
        color: #e6a23c;
        background: #fdf6ec;
        border-color: #f5dab1;
        &:hover,
        &:focus {
          background: #e6a23c;
          border-color: #e6a23c;
          color: #fff;
        }
        &:active {
          background: #cf9236;
          border-color: #cf9236;
          color: #fff;
          outline: none;
        }
      }
    }
    &--danger {
      color: #fff;
      background-color: #f56c6c;
      border-color: #f56c6c;
      &:hover,
      &:focus {
        background: #f78989;
        border-color: #f78989;
        color: #fff;
      }
      &:active {
        background: #dd6161;
        border-color: #dd6161;
        color: #fff;
      }
      &.is-plain {
        color: #f56c6c;
        background: #fef0f0;
        border-color: #fbc4c4;
        &:hover,
        &:focus {
          background: #f56c6c;
          border-color: #f56c6c;
          color: #fff;
        }
        &:active {
          background: #dd6161;
          border-color: #dd6161;
          color: #fff;
          outline: none;
        }
      }
    }
    // 圆角
    &.is-round {
      border-radius: 20px;
      padding: 12px 23px;
    }
    &.is-circle {
      border-radius: 50%;
      padding: 12px;
    }
    [class*='lk-icon-']+span {
      margin-left: 5px;
    }
    
  }
  .lk-button.is-disabled, .lk-button.is-disabled:hover, .lk-button.is-disabled:focus {
      color: #c0c4cc;
      cursor: not-allowed;
      background-image: none;
      background-color: #fff;
      border-color: #ebeef5;
    }
  
</style>